/*
 * @Author: hongbin
 * @Date: 2023-06-23 21:23:42
 * @LastEditors: hongbin
 * @LastEditTime: 2023-06-27 17:16:29
 * @Description:  use gsap
 */
import { FC } from "react";
import * as THREE from "three";
import { ThreeHelper } from "@/ThreeHelper";
import Layout from "@/components/Three/Layout";
import { gsap } from "gsap";
// import { ScrollTrigger } from "gsap/ScrollTrigger";
// import { ScrollToPlugin } from "gsap/ScrollToPlugin";

interface IProps {}

const destroyEvent = [] as VoidFunction[];

const Index: FC<IProps> = () => {
    return (
        <>
            <Layout
                seoTitle={"gsap"}
                init={init}
                destroy={() => destroyEvent.forEach((destroy) => destroy())}
            />
            <div
                id="container"
                style={{
                    height: "200vh",
                    width: "100%",
                }}
            ></div>
        </>
    );
};

export default Index;

async function init(helper: ThreeHelper) {
    helper.addStats();
    helper.frameByFrame();
    helper.addGUI();
    helper.addAxis();
    helper.useRoomEnvironment();
    helper.setBackground("#7d7866");

    helper.controls.enableZoom = false;

    const { ScrollTrigger } = require("gsap/ScrollTrigger");
    const { ScrollToPlugin } = require("gsap/ScrollToPlugin");

    gsap.registerPlugin(ScrollTrigger);

    helper.camera.position.set(0, 0, 10);

    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: "#container",
            start: 0,
            end: innerHeight,
            scrub: 1,
            onUpdate: (event) => {},
            onLeave: (e) => {},
            onEnterBack: () => {},
        },
    });
    const box = new THREE.Mesh(
        new THREE.BoxGeometry(2, 2, 2),
        new THREE.MeshStandardMaterial()
    );

    tl.to(
        box.position,
        {
            x: 5,
            duration: 1,
            onUpdate: () => {},
            onComplete: () => {},
        },
        0
    );
    const p = {
        color: "#fff",
    };
    tl.to(
        p,
        {
            color: "#000",
            duration: 1,
            onUpdate: () => {
                box.material.color = new THREE.Color(p.color);
            },
            onComplete: () => {},
        },
        // 与它上一个动画一起 如果这个是第二个和填0一样
        // "<"
        0
    );

    helper.add(box);
}
